<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手市场 - 设置</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #66BB6A;
            --light-gray: #F5F5F5;
            --text-color: #212121;
            --sub-text: #757575;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-gray);
            min-height: 100vh;
            padding-bottom: 60px;
            position: relative;
        }

        .header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem;
            text-align: center;
        }

        .content {
            flex: 1;
            padding-bottom: 60px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }

        .settings-container {
            background-color: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-top: 1rem;
        }

        .settings-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }

        .settings-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .settings-title {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            color: var(--text-color);
            display: flex;
            align-items: center;
        }

        .settings-title i {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }

        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .setting-item:last-child {
            border-bottom: none;
        }

        .setting-label {
            display: flex;
            align-items: center;
            font-size: 1rem;
        }

        .setting-label i {
            margin-right: 0.8rem;
            color: var(--primary-color);
            font-size: 1.2rem;
        }

        .setting-value {
            color: var(--sub-text);
            font-size: 0.9rem;
        }

        .setting-action {
            background-color: transparent;
            border: none;
            color: var(--primary-color);
            font-size: 0.9rem;
            cursor: pointer;
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .setting-action:hover {
            background-color: rgba(76, 175, 80, 0.1);
        }

        .avatar-container {
            display: flex;
            align-items: center;
            padding: 1rem 0;
        }

        .avatar-preview {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 1rem;
            overflow: hidden;
            border: 2px solid var(--light-gray);
        }

        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-info {
            flex: 1;
        }

        .avatar-name {
            font-weight: 500;
            margin-bottom: 0.3rem;
        }

        .avatar-email {
            color: var(--sub-text);
            font-size: 0.9rem;
        }

        .footer {
            text-align: center;
            padding: 1rem;
            background-color: #333;
            color: white;
            margin-top: 1rem;
        }

        .nav-bar {
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            padding: 0.5rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            margin: 0 auto;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 12px 12px 0 0;
            z-index: 102;
        }

        .nav-bar a {
            color: var(--sub-text);
            text-decoration: none;
            padding: 0.5rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.8rem;
            transition: color 0.3s;
            position: relative;
        }

        .nav-bar a.active {
            color: var(--primary-color);
        }

        .nav-bar a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px;
        }

        .nav-icon {
            width: 24px;
            height: 24px;
            position: relative;
            margin-bottom: 0.2rem;
        }

        .home-icon::before {
            content: "🏠";
        }

        .products-icon::before {
            content: "📦";
        }

        .publish-icon::before {
            content: "✏️";
        }

        .news-icon::before {
            content: "💬";
        }

        .account-icon::before {
            content: "👤";
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 2rem;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
        }

        .close {
            color: #666;
            float: right;
            font-size: 1.2rem;
            font-weight: 400;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: var(--text-color);
            text-decoration: none;
        }

        .modal-content h2 {
            text-align: center;
            color: var(--text-color);
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
        }

        .modal-content input {
            width: 100%;
            padding: 0.6rem 0.8rem;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            margin: 0.5rem 0 0.8rem;
            font-size: 0.9rem;
            background-color: #f9f9f9;
        }

        .modal-content button {
            width: 100%;
            padding: 0.6rem;
            border: none;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .modal-content button[type="button"] {
            background-color: var(--primary-color);
            color: white;
        }

        .modal-content button[type="button"]:hover {
            background-color: var(--secondary-color);
        }

        .avatar-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .avatar-modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            text-align: center;
            border-radius: 8px;
        }

        .avatar-preview-modal {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 20px auto;
            overflow: hidden;
            border: 2px solid #ddd;
        }

        .avatar-preview-modal img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-actions {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .avatar-actions button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .avatar-actions button:first-child {
            background-color: #f44336;
            color: white;
        }

        .avatar-actions button:last-child {
            background-color: var(--primary-color);
            color: white;
        }

        .about-section {
            background-color: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-top: 1rem;
        }

        .about-content {
            font-size: 0.9rem;
            color: var(--sub-text);
            line-height: 1.8;
        }

        .about-content h3 {
            color: var(--text-color);
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .about-content p {
            margin-bottom: 0.8rem;
        }

        .version-info {
            text-align: right;
            color: var(--sub-text);
            font-size: 0.8rem;
            margin-top: 1rem;
        }
    </style>
</head>

<body>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if (!currentUser) {
                window.location.href = 'login.html';
            } else {
                // 更新用户信息显示
                const avatarPreview = document.querySelector('.avatar-preview img');
                const avatarPreviewModal = document.getElementById('avatarPreview');
                const userNameElement = document.querySelector('.avatar-name');
                const userEmailElement = document.querySelector('.avatar-email');

                userNameElement.textContent = currentUser.name;
                userEmailElement.textContent = currentUser.email;

                if (currentUser.avatar) {
                    avatarPreview.src = currentUser.avatar;
                    avatarPreviewModal.src = currentUser.avatar;
                } else {
                    avatarPreview.src = '图片/头像.jpg';
                    avatarPreviewModal.src = '图片/头像.jpg';
                }
            }

            // 退出登录
            const logoutButton = document.getElementById('logout');
            logoutButton.addEventListener('click', function () {
                if (confirm('确定要退出登录吗？')) {
                    localStorage.removeItem('currentUser');
                    window.location.href = 'login.html';
                }
            });

            // 修改密码模态框
            const changePasswordModal = document.getElementById('changePasswordModal');
            const changePasswordButton = document.getElementById('changePassword');
            const closePasswordModal = document.querySelector('.close');
            const savePasswordButton = document.getElementById('savePassword');

            changePasswordButton.addEventListener('click', function () {
                changePasswordModal.style.display = 'block';
            });

            closePasswordModal.addEventListener('click', function () {
                changePasswordModal.style.display = 'none';
            });

            window.addEventListener('click', function (event) {
                if (event.target === changePasswordModal) {
                    changePasswordModal.style.display = 'none';
                }
            });

            savePasswordButton.addEventListener('click', function () {
                const oldPassword = document.getElementById('oldPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;
                const users = JSON.parse(localStorage.getItem('users')) || [];

                if (newPassword === confirmPassword) {
                    const user = users.find(u => u.email === currentUser.email && u.password === oldPassword);
                    if (user) {
                        user.password = newPassword;
                        localStorage.setItem('users', JSON.stringify(users));
                        alert('密码修改成功，请重新登录');
                        localStorage.removeItem('currentUser');
                        window.location.href = 'login.html';
                    } else {
                        alert('原密码错误，请重新输入');
                    }
                } else {
                    alert('新密码和确认密码不一致，请重新输入');
                }
            });

            // 头像上传功能
            const avatarModal = document.getElementById('avatarModal');
            const uploadAvatarBtn = document.getElementById('uploadAvatarBtn');
            const avatarUpload = document.getElementById('avatarUpload');
            const cancelAvatarBtn = document.getElementById('cancelAvatarBtn');
            const saveAvatarBtn = document.getElementById('saveAvatarBtn');
            const avatarImgElement = document.querySelector('.avatar-preview img');

            avatarImgElement.addEventListener('click', function () {
                avatarModal.style.display = 'block';
            });

            uploadAvatarBtn.addEventListener('click', function () {
                avatarUpload.click();
            });

            avatarUpload.addEventListener('change', function (e) {
                const file = e.target.files[0];
                if (!file) return;
                if (!file.type.match('image.*')) {
                    alert('请选择图片文件');
                    return;
                }
                const reader = new FileReader();
                reader.onload = function (event) {
                    document.getElementById('avatarPreview').src = event.target.result;
                };
                reader.readAsDataURL(file);
            });

            cancelAvatarBtn.addEventListener('click', function () {
                avatarModal.style.display = 'none';
                document.getElementById('avatarPreview').src = avatarImgElement.src;
            });

            saveAvatarBtn.addEventListener('click', function () {
                const file = avatarUpload.files[0];
                if (!file) {
                    alert('请先选择图片');
                    return;
                }
                const reader = new FileReader();
                reader.onload = function (event) {
                    const users = JSON.parse(localStorage.getItem('users')) || [];
                    const userIndex = users.findIndex(u => u.email === currentUser.email);
                    if (userIndex !== -1) {
                        users[userIndex].avatar = event.target.result;
                        localStorage.setItem('users', JSON.stringify(users));
                        currentUser.avatar = event.target.result;
                        localStorage.setItem('currentUser', JSON.stringify(currentUser));
                        avatarImgElement.src = event.target.result;
                        alert('头像更新成功');
                        avatarModal.style.display = 'none';
                    } else {
                        alert('用户信息更新失败');
                    }
                };
                reader.readAsDataURL(file);
            });

            window.addEventListener('click', function (event) {
                if (event.target === avatarModal) {
                    avatarModal.style.display = 'none';
                }
            });

            // 修改用户名功能
            const changeUsernameButton = document.getElementById('changeUsername');
            const changeUsernameModal = document.getElementById('changeUsernameModal');
            const closeUsernameModal = document.getElementById('closeUsernameModal');
            const saveUsernameButton = document.getElementById('saveUsername');
            const newUsernameInput = document.getElementById('newUsername');

            changeUsernameButton.addEventListener('click', function () {
                newUsernameInput.value = currentUser.name;
                changeUsernameModal.style.display = 'block';
            });

            closeUsernameModal.addEventListener('click', function () {
                changeUsernameModal.style.display = 'none';
            });

            window.addEventListener('click', function (event) {
                if (event.target === changeUsernameModal) {
                    changeUsernameModal.style.display = 'none';
                }
            });

            saveUsernameButton.addEventListener('click', function () {
                const newUsername = newUsernameInput.value.trim();
                const users = JSON.parse(localStorage.getItem('users')) || [];
                const userIndex = users.findIndex(u => u.email === currentUser.email);

                if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]{1,20}$/.test(newUsername)) {
                    alert('用户名需为1-20位，支持中英文、数字和下划线');
                    return;
                }

                if (userIndex !== -1) {
                    users[userIndex].name = newUsername;
                    currentUser.name = newUsername;
                    localStorage.setItem('users', JSON.stringify(users));
                    localStorage.setItem('currentUser', JSON.stringify(currentUser));
                    document.querySelector('.avatar-name').textContent = newUsername;
                    changeUsernameModal.style.display = 'none';
                    alert('用户名修改成功！');
                } else {
                    alert('用户信息更新失败，请重试');
                }
            });
        });
    </script>

    <header class="header">
        <h1>校园二手市场</h1>
    </header>

    <div class="content">
        <main class="container">
            <div class="settings-container">
                <div class="avatar-container">
                    <div class="avatar-preview">
                        <img src="图片/头像.jpg" alt="用户头像">
                    </div>
                    <div class="avatar-info">
                        <div class="avatar-name">用户名</div>
                        <div class="avatar-email">用户邮箱</div>
                    </div>
                </div>

                <div class="settings-section">
                    <h2 class="settings-title"><i>👤</i>账户设置</h2>
                    <div class="setting-item">
                        <div class="setting-label"><i>🆔</i>用户名</div>
                        <div class="setting-value">当前用户名</div>
                        <button class="setting-action" id="changeUsername">修改</button>
                    </div>
                    <div class="setting-item">
                        <div class="setting-label"><i>🔒</i>密码</div>
                        <div class="setting-value">**********</div>
                        <button class="setting-action" id="changePassword">修改</button>
                    </div>
                    <div class="setting-item">
                        <div class="setting-label"><i>🖼️</i>头像</div>
                        <div class="setting-value">点击头像修改</div>
                    </div>
                </div>

                <div class="settings-section">
                    <h2 class="settings-title"><i>⚙️</i>系统设置</h2>
                    <div class="setting-item">
                        <div class="setting-label"><i>🔔</i>消息通知</div>
                        <div class="setting-value">已开启</div>
                        <button class="setting-action">管理</button>
                    </div>
                    <div class="setting-item">
                        <div class="setting-label"><i>🌙</i>深色模式</div>
                        <div class="setting-value">关闭</div>
                        <button class="setting-action">切换</button>
                    </div>
                </div>

                <div class="settings-section">
                    <h2 class="settings-title"><i>❓</i>关于</h2>
                    <div class="setting-item">
                        <div class="setting-label"><i>📖</i>用户协议</div>
                        <div class="setting-value"></div>
                        <a href="user-agreement.html" class="setting-action">查看</a>
                    </div>
                    <div class="setting-item">
                        <div class="setting-label"><i>🔒</i>隐私政策</div>
                        <div class="setting-value"></div>
                        <a href="privacy-policy.html" class="setting-action">查看</a>
                    </div>
                    <div class="setting-item">
                        <div class="setting-label"><i>💬</i>联系客服</div>
                        <div class="setting-value"></div>
                        <a href="customer-service.html" class="setting-action">前往</a>
                    </div>
                </div>

                <button class="setting-action" id="logout" style="width: 100%; margin-top: 1rem; color: #f44336;">
                    <i>🚪</i>退出登录
                </button>
            </div>

            <div class="about-section">
                <div class="about-content">
                    <h3>关于校园二手市场</h3>
                    <p>校园二手市场是一款专为在校大学生设计的二手物品交易平台，致力于为学生提供安全、便捷的二手交易服务。</p>
                    <p>我们的使命是减少资源浪费，促进校园内的物品循环利用，让学生能够以更实惠的价格购买到需要的物品，同时也能方便地出售自己的闲置物品。</p>
                </div>
                <div class="version-info">
                    当前版本：1.0.0
                </div>
            </div>
        </main>
    </div>

    <nav class="nav-bar">
        <a href="index.html">
            <div class="nav-icon home-icon"></div>
            首页
        </a>
        <a href="products.html">
            <div class="nav-icon products-icon"></div>
            商品
        </a>
        <a href="publish.html">
            <div class="nav-icon publish-icon"></div>
            发布
        </a>
        <a href="news.html">
            <div class="nav-icon news-icon"></div>
            消息
        </a>
        <a href="account.html">
            <div class="nav-icon account-icon"></div>
            我的
        </a>
    </nav>

    <!-- 修改密码模态框 -->
    <div id="changePasswordModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>修改密码</h2>
            <form>
                <label for="oldPassword">原密码：</label>
                <input type="password" id="oldPassword" required><br>
                <label for="newPassword">新密码：</label>
                <input type="password" id="newPassword" required><br>
                <label for="confirmPassword">确认新密码：</label>
                <input type="password" id="confirmPassword" required><br>
                <button type="button" id="savePassword">保存</button>
            </form>
        </div>
    </div>

    <!-- 头像上传模态框 -->
    <div id="avatarModal" class="avatar-modal">
        <div class="avatar-modal-content">
            <h2 style="margin-bottom: 20px;">修改头像</h2>
            <div class="avatar-preview-modal">
                <img id="avatarPreview" src="" alt="头像预览">
            </div>
            <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
            <button id="uploadAvatarBtn"
                style="padding: 10px 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; margin: 10px 0;">
                选择新头像
            </button>
            <div class="avatar-actions">
                <button id="cancelAvatarBtn">取消</button>
                <button id="saveAvatarBtn">保存</button>
            </div>
        </div>
    </div>

    <!-- 修改用户名模态框 -->
    <div id="changeUsernameModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeUsernameModal">&times;</span>
            <h2>修改用户名</h2>
            <form>
                <label for="newUsername">新用户名：</label>
                <input type="text" id="newUsername" required minlength="1" maxlength="20" 
                       placeholder="请输入1-20位用户名（支持中英文、数字、下划线）"><br>
                <button type="button" id="saveUsername">保存修改</button>
            </form>
        </div>
    </div>
</body>

</html>